<template>
  <div class="container">
    <div class="container-1200">
      <div class="title mg-B20">编辑项目活动资料</div>
      <div>
        <div style="color: red; margin-left: 20px">
          审核状态：{{
            projectActivityStatusFormate(projectActivityForm.status)
          }}
        </div>
        <div
          style="color: red; margin-left: 20px"
          v-if="projectActivityForm.memo"
        >
          驳回说明：{{ projectActivityForm.memo }}
        </div>
      </div>
      <div>
        <el-form
          :model="projectActivityForm"
          :rules="projectActivityRules"
          ref="projectActivityForm"
        >
          <el-row class="rowBorder rowTopBorder">
            <el-col :span="4" class="col-flex bg-ccc request">活动名称</el-col>
            <el-col :span="8" class="col-flex colLeftBorder colRightBorder">
              <el-form-item prop="activityName" class="vali">
                <el-input v-model="projectActivityForm.activityName">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="col-flex bg-ccc"
              >级别(国际/国/省/市)</el-col
            >
            <el-col :span="8" class="col-flex colLeftBorder">
              <el-form-item prop="jb" class="vali">
                <el-select
                  v-model="projectActivityForm.jb"
                  placeholder="点击选择企业等级注册类型"
                >
                  <el-option
                    v-for="item in jbDict"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="rowBorder">
            <el-col :span="4" class="col-flex bg-ccc request">活动主题</el-col>
            <el-col :span="8" class="col-flex colLeftBorder colRightBorder">
              <el-form-item prop="activityTitle" class="vali">
                <el-input v-model="projectActivityForm.activityTitle">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="col-flex bg-ccc request">活动时间</el-col>
            <el-col :span="8" class="col-flex colLeftBorder">
              <el-form-item prop="activityDate" class="vali">
                <el-date-picker
                  v-model="projectActivityForm.activityDate"
                  type="date"
                  placeholder="请选择启动时间"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="rowBorder">
            <el-col :span="4" class="col-flex bg-ccc request">举办单位</el-col>
            <el-col :span="8" class="col-flex colLeftBorder colRightBorder">
              <el-form-item prop="company" class="vali">
                <el-input v-model="projectActivityForm.company"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4" class="col-flex bg-ccc request">项目名称</el-col>
            <el-col :span="8" class="col-flex colLeftBorder leftAlign-pd15">
              <!-- {{projectActivityForm.projectName}} -->
              <el-form-item prop="projectId" class="vali">
              <el-select v-model="projectActivityForm.projectId" placeholder="请选择项目" filterable >
                <el-option
                  :label="item.projectName"
                  :value="item.id"
                  v-for="item in projectList"
                  :key="item.id"
                ></el-option>
              </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="rowBorder">
            <el-col :span="4" class="col-flex bg-ccc">活动地点</el-col>
            <el-col :span="20" class="col-flex colLeftBorder">
              <el-form-item prop="address" class="vali">
                <el-input v-model="projectActivityForm.address"> </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row class="rowBorder">
          <el-col :span="4" class="col-flex bg-ccc">活动状态</el-col>
         <el-col :span="8" class="col-flex colLeftBorder colRightBorder leftAlign-pd15">{{ projectActivityStatusFormate(projectActivityForm.status) }}</el-col>
          <el-col :span="4" class="col-flex bg-ccc">驳回说明</el-col>
         <el-col :span="8" class="col-flex colLeftBorder leftAlign-pd15">{{ projectActivityForm.memo }}</el-col>
        </el-row> -->
          <el-row class="rowBorder bg-ccc">
            <el-col :span="4" class="col-flex request">相关资料</el-col>
            <el-col
              :span="20"
              class="col-flex colLeftBorder leftAlign-pd30 bg-fff"
            >
              <!-- {{ projectActivityForm.meta }} -->
              <!-- <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in meta"
                :key="index"
                color= '#0bbd87'
                >
                 <div class="flexWithJusCenter">
                    <el-link
                      :href="activity.url"
                      target="_blank"
                      type="primary"
                      >{{ activity.name }}</el-link
                    >
                    <el-button
                      class="mg-L20"
                      type="danger"
                      icon="el-icon-delete"
                      circle
                      size="mini"
                      @click="removeItem(index)"
                    ></el-button>
                  </div>
              </el-timeline-item>
            </el-timeline> -->

              <div style="margin: 10px">
                <!-- <el-image fit="contain" style="width: 100px; height: 100px" :src="meta.first">
                </el-image> -->
                <img style="width: 100px; height: 100px" :src="meta.first">
                </img>
                <div class="flexWithJusCenter">
                  <el-link
                    :href="meta.first"
                    target="_blank"
                    type="primary"
                    class="link"
                    >活动主题图</el-link
                  >
                </div>
                <div class="flexWithJusCenter mg-T10">
                  <singleFileUpload
                    @returnUrl="returnFirstUrl"
                  ></singleFileUpload>
                </div>
              </div>

              <div style="margin: 10px">
                <!-- <el-image fit="contain"
                  style="width: 100px; height: 100px"
                  :src="meta.second"
                >
                </el-image> -->
                <img style="width: 100px; height: 100px" :src="meta.second">
                </img>
                <div class="flexWithJusCenter">
                  <el-link
                    :href="meta.second"
                    target="_blank"
                    type="primary"
                    class="link"
                    >领导讲话图</el-link
                  >
                </div>
                <div class="flexWithJusCenter mg-T10">
                  <singleFileUpload
                    @returnUrl="returnSecondUrl"
                  ></singleFileUpload>
                </div>
              </div>

              <div style="margin: 10px">
                <!-- <el-image fit="contain" style="width: 100px; height: 100px" :src="meta.third">
                </el-image> -->
                <img style="width: 100px; height: 100px" :src="meta.third">
                </img>
                <div class="flexWithJusCenter">
                  <el-link
                    :href="meta.third"
                    target="_blank"
                    type="primary"
                    class="link"
                    >参会人员图</el-link
                  >
                </div>
                <div class="flexWithJusCenter mg-T10">
                  <singleFileUpload
                    @returnUrl="returnThirdUrl"
                  ></singleFileUpload>
                </div>
              </div>
              <el-button type="primary" @click="openExamples"
                >查看示例图</el-button
              >
            </el-col>
          </el-row>
          <div class="mg-T20">
            <el-form-item>
              <el-button type="primary" @click="onSave('projectActivityForm')"
                >保存为草稿</el-button
              >
              <el-button
                type="primary"
                @click="onSaveAndSubmit('projectActivityForm')"
                >保存并提交</el-button
              >
              <el-button @click="back">返回</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>

    <el-dialog title="示例图" :visible.sync="examplesVisible" width="700px">
      <div class="flex">
      <div style="margin: 10px">
        <el-image fit="contain" style="width: 200px; height: 200px" src="http://www.lwscjd.cn/data/upload/10200/2021/10/23/8ecfd3c39384f5b20439cca355b65829/角度1-活动全景包含主视觉.jpg">
        </el-image>
        <div class="flexWithJusCenter">
          活动主题图
        </div>
      </div>

      <div style="margin: 10px">
        <el-image fit="contain" style="width: 200px; height: 200px" src="http://www.lwscjd.cn/data/upload/10200/2021/10/23/aa550a8a52d34dd3e469529948681bb5/角度2-领导发言颁奖等主要环节.jpg">
        </el-image>
        <div class="flexWithJusCenter">
          领导讲话图
        </div>
      </div>

      <div style="margin: 10px">
        <el-image fit="contain" style="width: 200px; height: 200px" src="http://www.lwscjd.cn/data/upload/10200/2021/10/23/8dce6e13078de0bc3657156002197a3d/角度3-观众全景.jpg">
        </el-image>
        <div class="flexWithJusCenter">
          参会人员图
        </div>
      </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import multiUpload from "@/components/Upload/multiUpload";
import fileUpload from "@/components/Upload/fileUpload";
import singleFileUpload from "@/components/Upload/singleFileUpload";
import { find as companyFind } from "@/api/company";
import { list as dictList } from "@/api/dict";
import utils from "@/utils/utils.js";
import { validPhone, validPositiveIntAndZero } from "@/utils/validate.js";
import { find as projectFind, list as projectList } from "@/api/project";
import {
  update as projectActivityUpdate,
  find as projectActivityFind,
} from "@/api/projectActivity";

export default {
  components: { multiUpload, fileUpload, singleFileUpload },
  name: "projectActivityEdit",
  data() {
    const validateCapital = (rule, value, callback) => {
      if (utils.isNull(value)) {
        callback();
      } else if (!validPositiveIntAndZero(value)) {
        callback(new Error("必须为大于等于0的数值"));
      } else {
        callback();
      }
    };

    return {
      examplesVisible: false,
      meta: {
        // first: "",
        // second: "",
        // third: "",
      },
      projectActivityForm: {
        projectId: "", //所属项目',
        projectName: "", //项目名称',
        jb: "", //级别(国际/国/省/市)',
        activityName: "", //活动名称',
        activityTitle: "", //活动主题',
        activityDate: "", //活动时间',
        address: "", //活动地点',
        company: "", //举办单位',
        meta: "", //相关资料（横幅、台上、台下）[{name:,url:}]',
        companyId: "", //
      },
      projectActivityRules: {
        projectId: [
          { required: true, message: "请选择项目名称", trigger: "blur" },
        ],
        jb: [{ required: true, message: "请选择级别", trigger: "blur" }],
        activityTitle: [
          { required: true, message: "请输入活动主题", trigger: "blur" },
        ],
        activityName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        activityDate: [
          { required: true, message: "请选择活动时间", trigger: "blur" },
        ],
        company: [
          { required: true, message: "请输入举办单位", trigger: "blur" },
        ],
      },

      projectList:[],
      projectId: "",
      projectInfo: {},
      companyId: "",
      projectActivityForm: {},

      jbDict: [],
      jbPromise: "",
      projectActivityStatusDict: [],
      projectActivityStatusPromise: "",
      getProjectListPromise:"",

      path: "",
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.path = route.path
      },
      immediate: true,
    },
  },

  activated() {
    console.log("activated执行了--");
    if (this.$store.getters.closeAliveName == "projectActivityEdit") {
      console.log("activated执行了--", this.$store.getters);
      this.projectActivityId = this.$route.query.projectActivityId;
      this.projectActivityFind(this.projectActivityId);
      this.$store.dispatch("user/cleanCloseAliveName");
    }
  },

  created() {
    console.log("created执行了--");
    this.jbPromise = utils.getDictList("jb", (res) => {
      this.jbDict = res.data;
    });
    this.getProjectListPromise = this.getProjectList()
    this.projectActivityStatusPromise = utils.getDictList(
      "projectActivity_status",
      (res) => {
        this.projectActivityStatusDict = res.data;
      }
    );
    if (this.$route.query) {
      this.projectActivityForm.companyId = this.companyId =
        this.$route.query.companyId;
      this.projectActivityForm.projectId = this.projectId =
        this.$route.query.projectId;
      this.projectActivityId = this.$route.query.projectActivityId;
      // this.projectFind(this.projectId);
    }
  },

  mounted() {
    console.log("mounted执行了--");
    Promise.all([this.jbPromise, this.projectActivityStatusPromise, this.getProjectListPromise]).then(
      (res) => {
        //console.log("字典已经全部加载完成--");
        this.projectActivityFind(this.projectActivityId);
      }
    );
  },

  destroyed() {},

  methods: {
    //打开示例图
    openExamples() {
      this.examplesVisible = true;
    },

    removeItem(index) {
      this.meta.splice(index, 1);
    },

    returnFirstUrl(data) {
      console.log("data--", data);
      this.meta.first = data.url;
      console.log("this.meta--", this.meta);
    },

    returnSecondUrl(data) {
      console.log("data--", data);
      this.meta.second = data.url;
    },

    returnThirdUrl(data) {
      console.log("data--", data);
      this.meta.third = data.url;
    },
    //获取活动信息
    projectActivityFind(id) {
      projectActivityFind(id).then((res) => {
        console.log("获取活动信息--", res);
        if (res.type == "success") {
          if (!utils.isNull(res.data.projectActivity.meta)) {
            this.meta = JSON.parse(res.data.projectActivity.meta);
          }
          this.projectActivityForm = res.data.projectActivity;
          this.projectActivityForm.createDate = utils.dateFormatter(
            this.projectActivityForm.createDate
          );
        }
      });
    },

    //获取公司信息
    companyFind(id) {
      companyFind(id).then((res) => {
        console.log("获取公司信息res--", res);
        if (res.type == "success") {
          this.projectActivityForm = res.data.company;
        }
      });
    },

    //获取项目列表
    getProjectList(){
      return projectList().then((res) => {
        console.log("获取项目信息--", res);
        if (res.type == "success") {
          this.projectList = res.data.data;
        }
      });
    },

    //获取项目信息
    projectFind(id) {
      let _this = this;
      projectFind(id).then((res) => {
        console.log("获取项目信息--", res);
        if (res.type == "success") {
          _this.projectInfo = res.data.project;
          _this.projectActivityForm.projectName = res.data.project.projectName;
        }
      });
    },

    onSaveAndSubmit(formName) {
      this.projectActivityForm.status = 1;
      this.onSubmit(formName, () => {
        this.$message.success("项目活动资料成功提交");
      });
    },

    onSave(formName) {
      this.projectActivityForm.status = 0;
      this.onSubmit(formName, () => {
        this.$message.success("项目活动资料保存成功");
      });
    },

    //表单提交事件
    onSubmit(formName, callback) {
      let _this = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (
            !utils.isNull(_this.meta.first) &&
            !utils.isNull(_this.meta.second) &&
            !utils.isNull(_this.meta.third)
          ) {
            _this.projectActivityForm.meta = JSON.stringify(_this.meta);
            console.log(
              "_this.projectActivityForm.meta--",
              _this.projectActivityForm.meta,
              typeof _this.projectActivityForm.meta,
              typeof _this.meta
            );
            projectActivityUpdate(this.projectActivityForm)
              .then((res) => {
                console.log("projectActivitySave--", res);
                if (res.type == "success") {
                  if (callback) {
                    callback(res);
                  }
                  this.$store.dispatch("user/setCloseView", this.path)
                  this.$router.push({
                    path: "/projectActivity/list",
                    // query: {
                    //   companyId: this.companyId,
                    //   projectId: this.projectId,
                    // },
                  });
                }
              })
              .catch((err) => {
                this.$message.error(err.msg);
              });
          } else {
            if (utils.isNull(_this.meta.first)) {
              this.$notify.error({
                title: "提示",
                message: "请上传活动主题图",
              });
            } else if (utils.isNull(_this.meta.second)) {
              this.$notify.error({
                title: "提示",
                message: "请上传领导讲话图",
              });
            } else if (utils.isNull(_this.meta.third)) {
              this.$notify.error({
                title: "提示",
                message: "请上传参会人员图",
              });
            }
          }
        }
      });
    },

    back() {
      this.$router.go(-1);
    },

    jbFormate(data) {
      return utils.selectDictLabel(this.jbDict, data);
    },

    projectActivityStatusFormate(data) {
      return utils.selectDictLabel(
        this.projectActivityStatusDict,
        "projectActivity_status-" + data
      );
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .vali .el-form-item__content .el-form-item__error {
  top: 5px !important;
  right: 30px !important;
  left: unset !important;
  // left: 80% !important;
}

/deep/ .el-date-editor {
  width: 100%;
}

/deep/ .el-date-editor .el-input__inner {
  padding-right: 0px !important;
}

/deep/ .el-input__inner {
  border: 1px solid #fff !important;
}

.el-select {
  width: 100%;
}
.el-form-item {
  margin: 0;
  width: 100%;
}
</style>
